<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
		<title>游戏中...</title>
	</head>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/gobang.js"></script>
	<script src="js/audio.js"></script>
	<script>
		//页面了参数
		var pageParams = new Object();
		
		var gameBegin = false;//游戏开始的标志位
		var isMe = false;//是否轮到我落子
		var goColor;//棋子的颜色 0 - 黑色 1 - 白色
		
		//页面加载时触发
		$(function(){
			//初始化
			initWs();
			//获取页面参数
			initPage();
			//初始化棋盘
			initGoBang();
			//初始化音频
			InitAudio({
				enableUpload: true,//支持音频文件上传
				url: "http://localhost:8080/audio/upload",
				uploadSucc: function(data){
					console.log("音频文件上传成功，文件名：" + data);
					
					//将该语音消息发送给对方
					var msg = new Object();
					msg.msgType = 204;
					msg.audio = data;
					sendMsgToServer(msg);
					
					//本地生成一条录音消息，再通过websocket发送给对方
					showInfo2Div("[我]: <button onclick='playAudio(\"" + data + "\")'>点击播放</button>");
				}
			});
		});
		
		//初始化五子棋棋盘
		function initGoBang(){
			//初始化棋盘
			new GoBang({
				id: "gobang_div",
				click: function(x,y){//点击棋盘的回调方法
					if(gameBegin && isMe){
						
						//准备一个信息，将落子信息传递给WebSocket服务器
						var msg = new Object();
						msg.msgType = 202;//落子信息
						msg.x = x;
						msg.y = y;
						msg.goColor = goColor;//落子的颜色
						
						//消息通知服务器
						sendMsgToServer(msg);//将落子信息 告诉服务器
					}
				}
			});
		}
		
		//初始化WebSocket
		var ws;
		function initWs(){
			//判断浏览器是否支持WebSocket技术
			if(window.WebSocket){
				//支持websocket 
				
				//连接websocket服务器
				ws = new WebSocket("ws://localhost:8080/gobank");
				
				//给ws对象设置回调方法
				ws.onopen = function(){
					console.log("已经成功连接了服务器....");
					showInfo2Div("[系统]:已经成功连接了服务器....");
					//初始化房间
					initRoom();
				}
				
				ws.onclose = function(){
					console.log("与服务器的连接已经断开....");	
					showInfo2Div("[系统]:与服务器的连接已经断开....");
				}
				
				ws.onerror = function(e){
					console.log("与服务器连接发生异常....")
				}
				
				ws.onmessage = function(resp){
					console.log("接收到服务器的消息：" + resp.data);
					
					 /*   服务器 -> 客户端：
					           300 - 房间未找到
					           301 - 房间已经满人
					           302 - 房间密码错误
					
					           400 - 有人加入房间，游戏已经开始
							   401 - 加入房间成功，游戏已经开始
					*/         
					
					//处理服务器的消息
					var msg = JSON.parse(resp.data);
					if(msg.msgType == 300){
						showInfo2Div("房间未找到！");
					} else if(msg.msgType == 301){
						showInfo2Div("房间已经满人！");
					} else if (msg.msgType == 302) {
						showInfo2Div("房间密码错误");
					} else if(msg.msgType == 400){
						//有人加入房间
						
						//获取对手的信息
						var header = msg.header;
						var nickname = msg.nickname;
						var uid = msg.uid;
						
						//设置对手的信息
						$("#right_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
						$("#right_nickname").html(nickname);
						$("#right_flag").hide();
						
						//隐藏右边等待的div
						$(".right_div_wait").hide();
						$(".right_div").show();
						
						$("#left_flag").show();
						
						gameBegin = true;//游戏开始
						isMe = true;//房主默认先手
						goColor = 0;//房主默认执黑
						
						showInfo2Div("[系统]:" + nickname + "加入房间，对局开始...");
						
					} else if(msg.msgType == 401){
						//加入房间成功
						// alert("加入房间成功");
						
						//获取对手的信息
						var header = msg.header;
						var nickname = msg.nickname;
						var uid = msg.uid;
						
						//设置对手的信息
						$("#right_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
						$("#right_nickname").html(nickname);
						$("#right_flag").hide();
						
						//隐藏右边等待的div
						$(".right_div_wait").hide();
						$(".right_div").show();
						$("#right_flag").show();
						
						gameBegin = true;//游戏开始
						isMe = false;//加入者默认后手
						goColor = 1;//加入者默认执白
						
						showInfo2Div("[系统]:成功加入" + nickname + "房间，对局开始...");
					} else if(msg.msgType == 402){
						//对手的落子信息
						var x = msg.x;
						var y = msg.y;
						var otherColor = msg.goColor;
						var isWin = msg.isWin;//对方是否胜利
						//将对手的落子信息绘制到我的棋盘上
						drawGo(x,y,otherColor);
						//我方落子
						isMe = true;
						$("#left_flag").show();
						$("#right_flag").hide();
						
						//判断对方是否胜利
						if(isWin){
							//对方胜利
							//客户端也需要同步更新欢乐豆数量
							var happyBean = localStorage.getItem("happyBean");
							localStorage.setItem("happyBean", parseInt(happyBean) - 1000);
							
							gameBegin = false;
							showInfo2Div("[系统]:我方落败，游戏结束!");
						}
						
					} else if(msg.msgType == 403){
						//自己落子成功
						var x = msg.x;
						var y = msg.y;
						var meColor = msg.goColor;
						var isWin = msg.isWin;//我方是否胜利
						//在自己的棋盘上 绘制自己的落子信息
						drawGo(x,y,meColor);
						//转让落子的权利
						isMe = false;
						$("#left_flag").hide();
						$("#right_flag").show();
						
						if(isWin){
							//我方胜利
							//客户端也需要同步更新欢乐豆数量
							var happyBean = localStorage.getItem("happyBean");
							localStorage.setItem("happyBean", parseInt(happyBean) + 1000);
							
							gameBegin = false;
							showInfo2Div("[系统]:我方绝杀，游戏结束!");
						}
					} else if(msg.msgType == 404){
						//对方给我发了聊天消息
						//获得对方的聊天消息
						var info = msg.info;
						//展示到聊天框中
						showInfo2Div("[对方]:" + info);
					} else if(msg.msgType == 405){
						//对方给我发了音频消息
						var audio = msg.audio;
						//展示到聊天框中
						showInfo2Div("[对方]: <button onclick='playAudio(\"" + audio + "\")'>点击播放</button>");
					}
				}
			} else {
				alert("骚瑞，您的浏览器不支持WebSocket，请更换更高级的浏览器");
			}
		}
		
		//发送消息到服务器
		function sendMsgToServer(msg){
			if(ws){
				if(typeof(msg) != "string") {
					//非字符串消息
					msg = JSON.stringify(msg);
				}
				//只发送字符串
				ws.send(msg);
			}
		}
		
		//初始化页面
		function initPage(){
			//获得上一个页面传递的参数
			//http://127.0.0.1:8848/GoGameClient/game.html?action=1&info=11111&pass=123456
			var url = location.href;
			var i = url.indexOf("?");//获取？的位置
			if (i != -1){
				//截取字符串
				var params = url.substring(i+1);
				
				//获取参数的分隔符
				var arrays = params.split("&");
				for(var j = 0; j < arrays.length; j++){
					//用=符号截取参数的 key - value
					var key = arrays[j].split("=")[0];
					var value = arrays[j].split("=")[1];
					//将解析的key和value 放入 页面的全局变量
					pageParams[key] = value;
				}
				
			} else {
				alert("游戏房间信息有误！");
			}
		}
		
		//初始化房间
		function initRoom(){
			console.log(pageParams);
			if(pageParams.action == 1){
				console.log("创建房间...");
				
				//走创建房间的逻辑
				createRoom();
				
			} else {
				console.log("加入房间...");
				
				//走加入房间的逻辑
				addRoom();
			}
		}
		
		
		//创建房间的逻辑
		function createRoom(){
			//发送websocket信息
			
			//准备的一个消息的协议
			var msg = new Object();
			msg.msgType = 200;//告诉服务器 - 创建房间的消息
			msg.info = decodeURI(pageParams.info);//告诉服务器 - 房间的信息
			msg.pass = pageParams.pass;//房间的密码
			
			//用户信息 - 谁创建的房间
			msg.uid = localStorage.getItem("uid");
			msg.nickname = localStorage.getItem("nickname");
			msg.header = localStorage.getItem("header");
			
			//设置头像等信息
			$("#left_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
			$("#left_nickname").html(msg.nickname);
			$("#left_flag").hide();
			
			//消息通知服务器
			sendMsgToServer(msg);
			
			showInfo2Div("[系统]:房间创建成功，等待玩家加入....");
		}
		
		//加入房间的逻辑
		function addRoom(){
			//发送websocket信息
			
			//准备一个消息的协议对象
			var msg = new Object();
			msg.msgType = 201;//加入房间
			msg.rid = pageParams.rid;//房间号
			msg.pass = pageParams.pass;//房间密码
			
			//用户信息 - 谁创建的房间
			msg.uid = localStorage.getItem("uid");
			msg.nickname = localStorage.getItem("nickname");
			msg.header = localStorage.getItem("header");
			
			//设置头像等信息
			$("#left_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
			$("#left_nickname").html(msg.nickname);
			$("#left_flag").hide();
			
			//消息通知服务器
			sendMsgToServer(msg);
			
			showInfo2Div("[系统]:尝试加入" + msg.rid + "号房间....");
		}
		
		
		/**
		 * 展示相关信息到聊天框中
		 */
		function showInfo2Div(msg){
			$("#info_div").append(msg + "<br/>");
		}
		
		
		/**
		 * 发送聊天消息
		 */
		function send_msg(){
			//获取输入框的内容
			var info = $("#info_input").val();
			if(info == null || info.trim() == ""){
				alert("聊天消息不能为空！");
				return;
			}
			
			//清空聊天框
			$("#info_input").val("");
			
			//将该消息发送给WebSocket服务器 ，让服务器转发给对方
			var msg = new Object();
			msg.msgType = 203;
			msg.info = info;
			sendMsgToServer(msg);
			
			//展示到自己的聊天框
			showInfo2Div("[我]:" + info);
		}
		
		/**
		 * 按住说话按钮的方法
		 */
		function beginRecord(){
			showInfo2Div("[系统]:请说话..");
			//开启录音设备
			startRecoder();
		}
		
		/**
		 * 结束说话按钮的方法
		 */
		function endRecord(){
			showInfo2Div("[系统]:说话结束..");
			//结束录音，并且自动上传
			stopRecoder();
		}
		
		/**
		 * 播放音频
		 * @param {Object} 
		 */
		function playAudio(filename) {
			//通过一个音频标签播放
			$("#myaudio").attr("src", "http://localhost:8080/audio/get?filename=" + filename);
			//播放音频
			$("#myaudio")[0].play();
		}
	</script>
	<style>
		.left_div {
			width: 20%;
			height: 100%;
			border-right: 1px solid #000000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.middle_div {
			width: 60%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.right_div {
			width: 20%;
			height: 100%;
			border-left: 1px solid #000000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.right_div_wait{
			width: 20%;
			height: 100%;
			border-left: 1px solid #000000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-family: "楷体";
		}
		
		.gobang_class {
			width: 500px;
			height: 500px;
			background-color: #00A2D4;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
		}
		
		
		.info_class {
			margin-top: 20px;
			border: 1px solid black;
			background: white;
			width:500px;
			height: 100px;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			padding: 5px;
			overflow: auto;
		}
		
		.bottom_class {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
		}
		
		.header {
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
		
		.nickname {
			margin-top: 40px;
			font-size: 30px;
			font-family: "楷体";
		}
		
		.flag{
			margin-top: 40px;
			font-size: 20px;
			font-family: "楷体";
		}
		
		
	</style>
	<body style="background-color: #FFE4C4; display: flex; flex-direction: row; width: 100%; height: 100%;">
		
		<div class="left_div">
			<!-- 房主的头像 -->
			<img id="left_header" class="header" src="img/header.jpeg"/>
			<span id="left_nickname" class="nickname">昵称</span>
			<span id="left_flag" class="flag">我方落子</span>
		</div>
		
		<!-- 游戏中间部分 -->
		<div class="middle_div">
			<!-- 棋盘 -->
			<div id="gobang_div" class="gobang_class">
				
			</div>
			<!-- 聊天的内容 -->
			<div id="info_div" class="info_class">
				
			</div>
			
			<div class="bottom_class">
				<input id="info_input" class="info_put_class" placeholder="请输入聊天内容"/> 
				<button onclick="send_msg()" style="margin-left: 10px;">发送信息</button> 
				<button onmousedown="beginRecord()" onmouseup="endRecord()" style="margin-left: 10px;">按住说话</button>
			</div>
		</div>
		
		<div class="right_div" style="display: none;">
			<!-- 对手的头像 -->
			<img id="right_header" class="header" src="img/header.jpeg"/>
			<span id="right_nickname" class="nickname">昵称</span>
			<span id="right_flag" class="flag">我方落子</span>
		</div>
		<div class="right_div_wait">
			等待玩家加入....
		</div>
		
		<!-- 展示音频 -->
		<audio id="myaudio"></audio>
	</body>
</html>
